<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="app-container">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- table -->
      <div class="main">
        <table>
          <!-- 头部 -->
          <thead>
            <tr>
              <th>名字</th>
              <th>图片</th>
              <th>单价</th>
              <th>个数</th>
              <th>总价</th>
              <th>操作</th>
            </tr>
          </thead>
          <!-- 身体 -->
          <tbody>
            <tr>
              <td>
                <input type="checkbox" />
                鸭梨
              </td>
              <td>
                <img src="./img/榴莲.png" alt="" />
              </td>
              <td>6</td>
              <td>
                <div class="my-input-number">
                  <!-- 递减 -->
                  <span
                    role="button"
                    class="my-input-number__decrease is-disabled"
                  >
                    -
                  </span>
                  <!-- 累加 -->
                  <span role="button" class="my-input-number__increase">
                    +
                  </span>
                  <div class="my-input">
                    <!-- 数字显示区域 -->
                    <span class="my-input__inner">0</span>
                  </div>
                </div>
              </td>
              <td>100</td>
              <td>
                <button>删除</button>
              </td>
            </tr>
          </tbody>
          <!-- 空车 -->
        </table>
        <div class="bottom">
          <!-- 全选 -->
          <span class="checkall">
            <input type="checkbox" />
            全选
          </span>
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥<span class="price">0</span></span
          >
        </div>
      </div>
    </div>
  </body>
</html>
